<template>
    <div>
        <el-dialog
            :title="this.$t('ExpressBatchLang.generate_batch')"
            :visible.sync="Visible"
            width="100%"
            fullscreen
            ref="coSourcing_box"
            :close-on-click-modal="false"
            @close="cancel"
        >
            <div class="midContant clearfix">
              <div class="dialogBox top">
                    <div class="dialogBoxItem">
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressBatchLang.batch_name') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    :disabled="!!allocation_number"
                                    ref="allocation_number_alias"
                                    @blur="handleBlur('allocation_number_alias', $event)"
                                    @focus="handleFocus($event)"
                                    :placeholder="$t('common.input_plactholder')"
                                    v-model="data.allocation_number_alias"
                                ></el-input>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressBatchLang.batch_date') }}:
                            </div>
                            <div class="contant">
                                <el-date-picker
                                    :disabled="!!allocation_number"
                                    ref="allocation_day"
                                    @blur="Blur('allocation_day')"
                                    @focus="Focus('allocation_day')"
                                    v-model="data.allocation_day"
                                    value-format="timestamp"
                                    type="date"
                                    :placeholder="$t('common.select_plactholder')"
                                >
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('ExpressBatchLang.Origin') }}:
                            </div>
                            <div class="contant">
                                <el-select
                                    :disabled="!!allocation_number"
                                    ref="start_local"
                                    filterable
                                    @blur="handleBlur('start_local', $event)"
                                    @change="handleChang('start_local')"
                                    v-model="data.start_local"
                                    :placeholder="$t('common.select_plactholder')"
                                    >
                                    <el-option
                                        v-for="item in options_location"
                                        :key="item.id"
                                        :label="item.name_current"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                {{ $t('ExpressBatchLang.car_num') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    :disabled="!!allocation_number"
                                    ref="car_number"
                                    @blur="handleBlur('car_number', $event)"
                                    @focus="handleFocus($event)"
                                    :placeholder="$t('common.input_plactholder')"
                                    v-model="data.car_number"
                                ></el-input>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                {{ $t('ExpressDeliveryManagementLang.Number_packages') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.package_num"
                                >
                                </el-input>
                            </div>
                        </div>
                         <div class="dialogBoxItemRow">
                            <div class="title">
                                {{ $t('ExpressCargoManagementLang.weight') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.weight"
                                >
                                </el-input>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                {{ $t('ExpressCargoManagementLang.volume') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.volume"
                                >
                                </el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex; height: calc(100% - 60px)">
                    <div style="position: relative" :style="{ width: level_1_width + 'px',height:'100%' }">
                      <div class="headerBox">{{$t('ExpressBatchLang.falseCosourcing')}}</div>
                        <MyTable
                            ref="ExpressCargoManagement_CoSourcing_table_level_1"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true }
                            }"
                            :tableColumn="tableColumn_level_1"
                            :tableData="tableData_level_1"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_1"
                            :CellOptionsArr="!allocation_number?[{id:1,img:require('../../../assets/img/add.png'),label:$t('common.batch_add')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')}]:[]"
                            @cellClick="cellClick_level_1"
                        >
                            <template v-slot:content="scope">
                                <span class="btnCLass" v-if="scope.config.templateType=='textBtn'&&!allocation_number" @click="selectItem(scope.row)">{{$t('common.select_btn')}}</span>
                                <span v-else>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_1.length"
                        >
                        </Pagination>
                    </div>
                    <div :style="{ width: SeekBar_width + 'px' }" class="SeekBar" @mousedown="sum_block_ON_1"></div>
                    <div :style="{ width: level_2_width > 0 ? level_2_width + 'px' : 'unset', flex: level_2_width > 0 ? 'unset' : 1,height:'100%' }">
                      <div class="headerBox">{{$t('ExpressBatchLang.trueCosourcing')}}</div>
                        <MyTable
                            ref="ExpressCargoManagement_CoSourcing_table_level_2"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true }
                            }"
                            :tableColumn="tableColumn_level_2"
                            :tableData="tableData_level_2"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_2"
                            :CellOptionsArr="!allocation_number?[{id:1,img:require('@/assets/img/del.png'),label:$t('common.batch_del')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')}]:[]"
                            @cellClick="cellClick_level_2"
                        >
                            <template v-slot:content="scope">
                                <span class="btnCLass" v-if="scope.config.templateType=='textBtn'&&!allocation_number" @click="delItem(scope.row)">{{$t('common.del')}}</span>
                                <span v-else>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_2.length"
                        >
                        </Pagination>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm" size="small"
                >{{$t('common.confirm')}}</el-button
                >
                <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
            </span>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        // 接收绑定参数
        midHight: [Number, String]
    },
    data() {
        return {
            Visible: false,
            allocation_number:'',
            data: {
                allocation_number_alias: '',
                allocation_day: '',
                start_local: '',
                car_number: '',
                package_num:'',
                weight: '',
                volume: '',
            },
            options_location:[],
            tableColumn_level_1: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('common.operation'),
                    prop: "operation",
                    width: 80,
                    templateType:'textBtn'
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Ticket_number'),
                    prop: 'ticket_num',
                    order: '',
                    width: 150
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Shipper'),
                    prop: 'order_uid_name',
                    order: '',
                    width: 150
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Origin'),
                    prop: 'start_local_name',
                    order: '',
                    width: 120
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.destination'),
                    prop: 'target_local_name',
                    order: '',
                    width: 120
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
                    prop: 'package_num',
                    order: '',
                    width: 80
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.weight'),
                    prop: 'weight',
                    order: '',
                    width: 80
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.volume'),
                    prop: 'volume',
                    order: '',
                    width:80
                }
            ],
            tableData_level_1: [],
            sendDataArr_level_1: [],
            tableColumn_level_2: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('common.operation'),
                    prop: "operation",
                    width: 80,
                    templateType:'textBtn'
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Ticket_number'),
                    prop: 'ticket_num',
                    order: '',
                    width: 150
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Shipper'),
                    prop: 'order_uid_name',
                    order: '',
                    width: 150
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Origin'),
                    prop: 'start_local_name',
                    order: '',
                    width: 120
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.destination'),
                    prop: 'target_local_name',
                    order: '',
                    width: 120
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
                    prop: 'package_num',
                    order: '',
                    width: 80
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.weight'),
                    prop: 'weight',
                    order: '',
                    width: 80
                },
                {
                    checked: true,
                    label: this.$t('ExpressDeliveryManagementLang.volume'),
                    prop: 'volume',
                    order: '',
                    width:80
                }
            ],
            tableData_level_2: [],
            sendDataArr_level_2: [],
            rightWidth: 35, //右侧空白宽度
            level_1_width: 300, //默认宽度
            level_2_width: 300, //默认宽度
            level_min_width: 300, //数据组最小宽度
            SeekBar_width: 4, //拖动条宽度
            confirmTrue: true, //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    deactivated() {},
    watch: {
        tableData_level_2:{
            handler(newVal, oldVal) {
                this.data.package_num=this.$computing(this.tableData_level_2.reduce((pre,cur)=>{return pre+Number(cur.package_num)},0),'fixed',0)
                this.data.weight=this.$computing(this.tableData_level_2.reduce((pre,cur)=>{return pre+Number(cur.weight)},0),'fixed',3)
                this.data.volume=this.$computing(this.tableData_level_2.reduce((pre,cur)=>{return pre+Number(cur.volume)},0),'fixed',5)
            },
            deep:true
        }
    },
    methods: {
       
        init(data='') {
            //监听盒子变化
            this.setWidth();
            window.addEventListener('resize', this.setWidth);
            window.addEventListener('mouseup', this.sum_block_NO);
            this.Visible = true;
            this.allocation_number=data
            this.getOptionsList()
            if(!!this.allocation_number){
                this.$get('getAllocationInfo', { allocation_number: this.allocation_number }).then((res) => {
                    this.data = res.data;
                    this.data.allocation_day=res.data.allocation_day*1000
                    this.getTableData()
                });
            }
        },
        getOptionsList() {
            this.$get("visibleAddress",{type:1}).then((res) => {
                this.options_location = res.data.start_local;
            });
        },
        getTableData() {
            this.$get('getAllocationOrder',{start_local:this.data.start_local}).then((res) => {
                this.tableData_level_1 = res.data;
            });
            if(!!this.allocation_number){
                this.$get('getAllocationOrder', { allocation_number: this.allocation_number,start_local:this.data.start_local }).then((res) => {
                    this.tableData_level_2 = res.data;
                });
            }
        },
        setWidth() {
            this.$nextTick(()=>{
              let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
              if(!this.$refs.coSourcing_box){
                return
              }
            if (windowWidth > 630) {
              this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = 'unset';
                this.level_1_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2, //默认宽度
                this.level_2_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2;
            } else {
                this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = '610px';
                this.level_1_width = 300, //默认宽度
                    this.level_2_width = 300; //默认宽度
            }
            })
        },
        sum_block_ok_1(e) {
            let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (e.clientX < this.level_min_width + this.rightWidth) {
                this.level_1_width = this.level_min_width;
            } else if (e.clientX > windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth) {
                this.level_1_width = windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth;
            } else {
                this.level_1_width = e.clientX - this.rightWidth;
            }
            this.level_2_width = windowWidth - this.SeekBar_width - this.level_1_width - this.rightWidth * 2;
        },
        sum_block_ON_1(e) {
            window.addEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'none'; //禁止选中文字
        },
        sum_block_NO() {
            window.removeEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'unset'; //取消禁止选中文字
        },
        setCheckBox_level_1(data) {
            this.sendDataArr_level_1 = data;
        },
        setCheckBox_level_2(data) {
            this.sendDataArr_level_2 = data;
        },
        selectItem(row){
            let obj=this.tableData_level_1.filter(el=>{return el.order_sn==row.order_sn})[0]
            this.tableData_level_2.unshift(obj)
            this.tableData_level_2.forEach(item=>{item.checked=false})
            this.tableData_level_1=this.tableData_level_1.filter(el=>{return el.order_sn!==row.order_sn})
        },
        delItem(row){
            let obj=this.tableData_level_2.filter(el=>{return el.order_sn==row.order_sn})[0]
            this.tableData_level_1.unshift(obj)
            this.tableData_level_1.forEach(item=>{item.checked=false})
            this.tableData_level_2=this.tableData_level_2.filter(el=>{return el.order_sn!==row.order_sn})
        },
        cellClick_level_1(id) {
            if (id == 1) {
                if (this.sendDataArr_level_1.length > 0) {
                    this.tableData_level_2.unshift(...this.sendDataArr_level_1)
                    this.tableData_level_2.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_1.forEach(item=>{
                      this.tableData_level_1=this.tableData_level_1.filter(el=>{return el.order_sn!==item.order_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_1.forEach((item) => {
                    this.$refs.ExpressCargoManagement_CoSourcing_table_level_1.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_1=this.tableData_level_1.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.ExpressCargoManagement_CoSourcing_table_level_1.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_1=[]
            }
        },
        cellClick_level_2(id) {
            if (id == 1) {
                if (this.sendDataArr_level_2.length > 0) {
                    this.tableData_level_1.unshift(...this.sendDataArr_level_2)
                    this.tableData_level_1.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_2.forEach(item=>{
                      this.tableData_level_2=this.tableData_level_2.filter(el=>{return el.order_sn!==item.order_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_2.forEach((item) => {
                    this.$refs.ExpressCargoManagement_CoSourcing_table_level_2.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_2=this.tableData_level_2.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.ExpressCargoManagement_CoSourcing_table_level_2.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_2=[]
            }
        },
        // 提交修改
        confirm() {
            let type = true;
            if (!this.data.allocation_number_alias) {
                this.$refs.allocation_number_alias.$el.childNodes[1].style.border = '1px solid red';
                type = false;
            }
            if(!this.data.allocation_day){
                this.$refs.allocation_day.$el.childNodes[1].style.border='1px solid red'
                type=false
            }
            if (!this.data.start_local&&this.data.start_local!==0) {
                this.$refs.start_local.$el.childNodes[1].childNodes[1].style.border =
                "1px solid red";
                type = false;
            }
            // 是否有空值必选项标识
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let str = this.tableData_level_2.map((obj) => {return '' + obj.order_sn;}).join(',');
                let params = new FormData();
                params.append('orders_sn', str);
                params.append('allocation_number_alias', this.data.allocation_number_alias);
                params.append('allocation_day', this.data.allocation_day/1000);
                params.append('start_local', this.data.start_local);
                params.append('car_number', this.data.car_number);
                this.$postForm('addAllocationOrder', params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消修改
        cancel() {
            this.data = {
                allocation_number_alias: '',
                allocation_day: '',
                start_local: '',
                car_number: '',
                package_num: '',
                weight: '',
                volume: '',
            };
            this.tableData_level_1 = [];
            this.sendDataArr_level_1 = [];
            this.tableData_level_2 = [];
            this.sendDataArr_level_2 = [];
            this.Visible = false;
            window.removeEventListener('resize', this.setWidth);
            window.removeEventListener('mouseup', this.sum_block_NO);
        },
        //输入框、下拉框失去焦点边框变色
        handleBlur(name, event) {
            if (!this.data[name] && this.data[name] !== 0) {
                event.target.style.border = '1px solid red';
            }
        },
        //输入框、下拉框获取焦点边框变色
        handleFocus(event) {
            event.target.style.border = '1px solid #E0E3E9';
        },
        handleChang(data) {
            if(data=='start_local'){
                this.getTableData()
            }
            if (this.data[data].length==0) {
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
            }else{
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
            }
        },
        // 判断了时间组件内容是否有东西
        Focus(name) {
            let dom = this.$refs[name].$el.childNodes[1]
            dom.style.border = "1px solid #E0E3E9";
        },
        Blur(name) {
            let dom = this.$refs[name].$el.childNodes[1]
            if (!this.data[name]) {
              dom.style.border = "1px solid red";
            }
        },
    }
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__body{
  height: 100%;
}
.midContant {
    border: 0;
    width: 100%;
    height: calc(100% - 80px);
    .tableBox{
      height: calc(100% - 100px);
    }
}
.dialogBox .dialogBoxItem {
    gap: 10px;
}
.SeekBar {
    cursor: col-resize;
}
.headerBox {
    height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    box-shadow: 0px 0px 2px#ccc;
    background-color: #EBEEF3;
    padding: 3px 10px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>